//Component1.jsx
import React from 'react';
import './index.styl'
import axios from 'axios';
import imgURL from './img/marker.png';
import {getUrl} from '../mixin'

// import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'

class BaiduMap extends React.Component {
  componentDidMount() {
    this.initMap();
  }

  initMap = () => {
    let BMap = window.BMap
    let map = new BMap.Map("map");
    let point = new BMap.Point(118.704, 32.015);
    map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    map.enableContinuousZoom()
    let mapStyle = [
      {//高速公路颜色
        "featureType": "highway",
        "elementType": "geometry",
        "stylers": {
          "color": "#1e5c94"
        }
      },
      {//行政区文字颜色
        "featureType": "arterial",
        "elementType": "geometry",
        "stylers": {
          "color": "#193b58"
        }
      },
      {//地铁颜色
        "featureType": "subway",
        "elementType": "geometry",
        "stylers": {
          "color": "#1e9287"
        }
      },
      {
        "featureType": "poilabel",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#00a7d2"
        }
      },
      {//河流颜色
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#a7c0e0ff"
        }
      },
      {//乡镇文字颜色
        "featureType": "town",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#000001ff"
        }
      },
      {//地图背景
        "featureType": "background",
        "elementType": "geometry",
        "stylers": {
          "color": "#000001"
        }
      },
      {//绿地背景
        "featureType": "green",
        "elementType": "geometry",
        "stylers": {
          "color": "#071738"
        }
      }
    ]
    // style : "midnight"  //设置地图风格为高端黑

    map.setMapStyle({styleJson: mapStyle});
    let myIcon = new BMap.Icon(imgURL, new BMap.Size(98, 98), {
      // 指定定位位置。
      // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      // 图标中央下端的尖角位置。
      anchor: new BMap.Size(20, 25),
    });
    axios.get('/api/visualData/queryGeographicLocation', {
      params: {
        id: getUrl(),
      }
    }).then((res) => {
      if (res.data.data) {
        map.centerAndZoom(new BMap.Point(res.data.data[0].longitude, res.data.data[0].latitude), 13);
        let marker = new BMap.Marker(new BMap.Point(res.data.data[0].longitude, res.data.data[0].latitude), {icon: myIcon});
        map.addOverlay(marker);
      }
    }).catch(err => console.log(err))
  }

  render() {
    return (
      <div className="map">
        <div id="map">
        </div>
      </div>
    )
  }
}

//导出组件
export default BaiduMap;
